<%--
  Created by IntelliJ IDEA.
  User: ChenTong
  Date: 2020/6/1
  Time: 0:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!Doctype html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <title>用户管理</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/js/jquery-ui/jquery-ui.min.css">
    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/jquery.serializejson.min.js"></script>
    <script src="static/js/jquery-ui/jquery-ui.min.js"></script>
</head>
<body>
<%--当前用户：${USER_SESSION.name}--%>
<%--    <a href="${pageContext.request.contextPath}/logout">退出</a>--%>
<%--    <!-- 用户列表 -->--%>
<%--    <div class="tbl-title">用户列表</div>--%>
<%--    <button onclick="showAddUserModal()">添加新的用户</button>--%>
<%--    <table id="users" class="tbl-list">--%>
<%--        <caption>展示用户信息</caption>--%>
<%--        <!--展示用户信息 -->--%>
<%--        <thead>--%>
<%--        <tr>--%>
<%--            <th id="id">ID</th>--%>
<%--            <th id="password">密码</th>--%>
<%--            <th id="name">用户名</th>--%>
<%--            <th id="code">Code</th>--%>
<%--            <th id="operation">操作</th>--%>
<%--        </tr>--%>
<%--        </thead>--%>
<%--        <tbody>--%>

<%--    </table>--%>



<%--    <!-- 添加用户模态框 -->--%>
<%--    <div id="add-user-modal" title="添加用户" style="display:none;">--%>
<%--        <form id="add-user-form">--%>

<%--            <table class="modal-tbl"><!--展示用户信息 -->--%>
<%--                <caption>展示用户信息</caption>--%>
<%--                <th id="th1"></th>--%>
<%--                <tr><td>ID</td><td><input type="text" name="id"></td></tr>--%>
<%--                <tr><td>密码</td><td><input type="password" name="password"></td></tr>--%>
<%--                <tr><td>用户名</td><td><input type="text" name="name"></td></tr>--%>
<%--                <tr><td>Code</td><td><input type="text" name="code"></td></tr>--%>
<%--            </table>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--    <!--删除用户对话模态框 -->--%>
<%--    <div id="delete-user-modal" title="删除用户" style="display:none;">--%>
<%--        <p>确定删除该用户吗？</p>--%>
<%--    </div>--%>
<%--    <!-- 更新用户模态框 -->--%>
<%--    <div id="update-user-modal" title="更新用户" style="display:none;">--%>
<%--        <form id="update-user-form">--%>
<%--            <table class="modal-tbl">--%>
<%--                <caption>展示用户信息</caption>--%>
<%--                <th id="th2"></th>--%>
<%--                <!--展示用户信息 -->--%>
<%--                <tr style="display: none"><td>ID</td><td><input type="text" name="id"></td></tr>--%>
<%--                <tr><td>账户</td><td><input type="text" name="id"></td></tr>--%>
<%--                <tr><td>密码</td><td><input type="password" name="password"></td></tr>--%>
<%--                <tr><td>姓名</td><td><input type="text" name="name"></td></tr>--%>
<%--                <tr><td>Code</td><td><input type="text" name="code"></td></tr>--%>
<%--            </table>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--    <!-- 提示信息模态框 -->--%>
<%--    <div id="msg-modal" title="" style="display:none">--%>
<%--        <p></p>--%>
<%--    </div>--%>
<%--<script>--%>
<%--    $(function() {--%>
<%--        listAllUser();--%>
<%--    });--%>
<%--    function listAllUser() {--%>
<%--        $.ajax({--%>
<%--            type: "GET",--%>
<%--            url: "/boss/user/list",--%>
<%--            dataType: "json",--%>
<%--            success: function(data) {--%>
<%--                // 每次载入前先清空显示区域，防止数据重复显示--%>
<%--                $("#users tbody").empty();--%>
<%--                if (data.code!==0){--%>
<%--                    alert(data.msg)--%>
<%--                }else {--%>
<%--                    var users = data.data;--%>
<%--                    for (var i in users) {--%>
<%--                        var user = users[i];--%>
<%--                        var userStr = JSON.stringify(user);--%>
<%--                        $("#users tbody").append(--%>
<%--                            '<tr><td>' + user.id + '</td>'--%>
<%--                            + '<td>' + user.password + '</td>'--%>
<%--                            + '<td>' + user.name + '</td>'--%>
<%--                            + '<td>' + user.code + '</td>'--%>
<%--                            + '<td><button onclick=\'showUpdateUserModal(' + userStr + ')\'>更新</button> '--%>
<%--                            + '<button onclick="deleteUser(' + user.id + ')">删除</button></td></tr>');--%>
<%--                    }--%>
<%--                }--%>

<%--            },--%>
<%--            error: function() {--%>
<%--                console.log("ajax error");--%>
<%--            }--%>
<%--        });--%>
<%--    }--%>
<%--    // 显示添加用户模态框--%>
<%--    function showAddUserModal() {--%>
<%--        $("#add-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息--%>
<%--        $("#add-user-modal").dialog({--%>
<%--            resizable: false,--%>
<%--            modal: true,--%>
<%--            buttons: {--%>
<%--                "提交": function() {--%>
<%--                    addUser();--%>
<%--                },--%>
<%--                "取消": function() {--%>
<%--                    $(this).dialog("close");--%>
<%--                },--%>
<%--            },--%>
<%--        });--%>
<%--    }--%>
<%--    // 添加用户--%>
<%--    function addUser() {--%>
<%--        var user = $("#add-user-form").serializeJSON();--%>
<%--        var userStr = JSON.stringify(user);--%>
<%--        alert(userStr)--%>
<%--        $.ajax({--%>
<%--            type: "POST",--%>
<%--            url: "/boss/user/add",--%>
<%--            data: userStr,--%>
<%--            contentType:'application/json;charset=utf-8',--%>
<%--            dataType: "json",--%>
<%--            success: function(data) {--%>

<%--                if (data.data && data.code === 0) {--%>
<%--                    $("#add-user-modal").dialog("close");--%>
<%--                    showMsg('添加成功！');--%>
<%--                    listAllUser();--%>
<%--                } else {--%>
<%--                    $("#add-user-modal").dialog("close");--%>
<%--                    showMsg('添加失败！'+data.msg);--%>
<%--                    listAllUser();--%>
<%--                }--%>
<%--            },--%>
<%--            error: function(data) {--%>
<%--                console.log("ajax error:"+data.msg);--%>
<%--            },--%>
<%--        });--%>
<%--    }--%>
<%--    // 删除用户--%>
<%--    function deleteUser(id) {--%>
<%--        // 将id封装为JSON格式数据--%>
<%--        // var data = {};--%>
<%--        // data.id = id;--%>
<%--        // var dataStr = JSON.stringify(data);--%>
<%--        // 显示删除用户模态框--%>
<%--        $("#delete-user-modal").dialog({--%>
<%--            resizable: false,--%>
<%--            modal: true,--%>
<%--            buttons: {--%>
<%--                "确认": function() {--%>
<%--                    $.ajax({--%>
<%--                        type: "GET",--%>
<%--                        url: "/boss/user/remove?id="+id,--%>
<%--                        contentType:'application/json;charset=utf-8',--%>
<%--                        dataType:"json",--%>
<%--                        success: function(data) {--%>
<%--                            if (data.data && data.code == 0) {--%>
<%--                                $("#delete-user-modal").dialog("close");--%>
<%--                                showMsg('删除成功！');--%>
<%--                                listAllUser();--%>
<%--                            } else {--%>
<%--                                $("#delete-user-modal").dialog("close");--%>
<%--                                showMsg('删除失败！'+data.msg);--%>
<%--                                listAllUser();--%>
<%--                            }--%>
<%--                        },--%>
<%--                        error: function(data) {--%>
<%--                            console.log("ajax error:"+data.msg );--%>
<%--                        },--%>
<%--                    });--%>
<%--                },--%>
<%--                "取消": function() {--%>
<%--                    $(this).dialog("close");--%>
<%--                },--%>
<%--            },--%>
<%--        });--%>
<%--    }--%>
<%--    //显示更新用户模态框--%>
<%--    function showUpdateUserModal(user) {--%>
<%--        $("#update-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息--%>
<%--        // 表单赋值--%>
<%--        $("#update-user-form input[name='id']").val(user.id);--%>
<%--        $("#update-user-form input[name='account']").val(user.account);--%>
<%--        $("#update-user-form input[name='password']").val(user.password);--%>
<%--        $("#update-user-form input[name='name']").val(user.name);--%>
<%--        $("#update-user-form input[name='info']").val(user.info);--%>
<%--        $("#update-user-modal").dialog({--%>
<%--            resizable: false,--%>
<%--            modal: true,--%>
<%--            buttons: {--%>
<%--                "提交": function () {--%>
<%--                    updateUser();--%>
<%--                },--%>
<%--                "取消": function () {--%>
<%--                    $(this).dialog("close");--%>
<%--                }--%>
<%--            }--%>
<%--        });--%>
<%--    }--%>
<%--    // 更新用户--%>
<%--    function updateUser() {--%>
<%--        // 获取序列化表单信息--%>
<%--        var user = $("#update-user-form").serializeJSON();--%>
<%--        var userStr = JSON.stringify(user);--%>

<%--        $.ajax({--%>
<%--            type: "POST",--%>
<%--            url: "/boss/user/update",--%>
<%--            data: userStr,--%>
<%--            contentType: 'application/json;charset=utf-8',--%>
<%--            dataType: "json",--%>
<%--            success: function(data) {--%>
<%--                if (data.data && data.code===0) {--%>
<%--                    $("#update-user-modal").dialog("close");--%>
<%--                    showMsg('更新成功！');--%>
<%--                    listAllUser();--%>
<%--                } else {--%>
<%--                    $("#update-user-modal").dialog("close");--%>
<%--                    showMsg('更新失败！'+data.msg);--%>
<%--                    listAllUser();--%>
<%--                }--%>
<%--            },--%>
<%--            error: function(data) {--%>
<%--                console.log("ajax error"+data.msg);--%>
<%--            }--%>
<%--        });--%>
<%--    }--%>

<%--    //显示提示信息--%>
<%--    function showMsg(text) {--%>
<%--        $("#msg-modal p").text(''); // 每次载入前先清空显示区域，防止显示之前的信息--%>
<%--        $("#msg-modal p").text(text);--%>
<%--        $("#msg-modal").dialog({--%>
<%--            modal: true,--%>
<%--        });--%>
<%--        // 2s后消失--%>
<%--        setTimeout(function() {--%>
<%--            $("#msg-modal").dialog("close")--%>
<%--        },2000);--%>
<%--    }--%>
<%--</script>--%>
</body>
</html>
